<template>
  <div id="bar-line-chart"  ref="barLineChart"></div>
</template>

<script>

export default {
  name: "barLineChart",
  props: {
    x: Array,
    y: Array,
  },
  components: {},
  data() {
    return {};
  },
  computed: {},
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.barLineChart);
    this.initOption();
  },
  methods: {
    initOption() {
      const xAxisData = this.x;
      const yAxisData = this.y;
      const sumData = [];
      const sumP1Data = [];
      const sumP2Data = [];
      const diffData = [];
      const diffPData = [];
      for (let i = 0; i < yAxisData.length; i++) {
        let temp_sum = 0;
        for (let j = i; j < yAxisData.length; j++) {
          temp_sum += yAxisData[j];
        }
        sumData.push(temp_sum);
        sumP1Data.push(((sumData[i] / sumData[i - 1]) * 100).toFixed(2));
        sumP2Data.push(((sumData[i] / sumData[0]) * 100).toFixed(2));
        diffData.push(-yAxisData[i]);
        diffPData.push(((yAxisData[i] / sumData[0]) * 100).toFixed(2));
      }

      console.log(yAxisData, sumData);
      const data = sumData;
      const data2 = diffData;

      this.option = {
        grid: {
          bottom: 300,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
            },
          },
        },
        toolbox:{
            right:20,
            feature:{
                saveAsImage: {},
                restore: {},
                magicType: {
                    type:['line','bar']
                },
                // brush: {},
            }
        },
        
        
        xAxis: [
          {
            show: true,
            data: xAxisData,
             axisLabel: { 
              interval: 0, margin:20,rotate:-85,
              // formatter:function(value){
              //   return value.replace("-","|").split("").join("\n")
              // }
             }
          },
          {
            show: false,
            data: xAxisData,
           
          },
        ],
        visualMap: {
          show: false,
          min: 0,
          max: data.length,
          dimension: 0,
          inRange: {
            color: ["#4a657a", "#308e92", "#b1cfa5", "#f5d69f", "#f5898b", "#ef5055"],
          },
        },
        yAxis: {
           
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#4a657a",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#08263f",
            },
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "现值",
            type: "bar",
            data: data2,
            z: 1,
            itemStyle: {
              normal: {
                opacity: 0.4,
                barBorderRadius: 5,
                shadowBlur: 3,
                shadowColor: "#111",
              },
            },
          },
          {
            name: "前占",
            type: "line",
            data: sumP1Data,

            xAxisIndex: 1,
            z: 2,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "transparent",
              },
            },
          },
          {
            name: "总占",
            type: "line",
            data: sumP2Data,
            xAxisIndex: 1,
            z: 2,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "transparent",
              },
            },
          },

          {
            name: "",
            tooltip: {
              show: false,
            },
            type: "line",
            data: data,
            z: 2,
            showSymbol: false,
            animationDelay: 0,
            animationEasing: "linear",
            animationDuration: 1200,
            lineStyle: {
              normal: {
                color: "transparent",
              },
            },
            areaStyle: {
              normal: {
                color: "#eee",
                shadowBlur: 10,
                shadowColor: "#aaa",
              },
            },
          },
          {
            name: "总值",
            type: "bar",
            data: data,
            xAxisIndex: 1,
            z: 3,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
              },
            },
          },
          {
            name: "现占",
            type: "line",
            data: diffPData,
            z: 2,
            showSymbol: false,
            lineStyle: {
              normal: {
                color: "transparent",
              },
            },
          },
        ],
        dataZoom: [{
           top: "-10",
          show: true,
            type: 'slider',
            xAxisIndex: 1,
            fillerColor: "rgba(224, 124, 62, 0.4)",
            borderColor: "rgba(234, 137, 34, 1)",
            handleStyle: {
      borderColor: "rgba(225, 74, 19, 1)",
    },
    selectedDataBackground: {
      lineStyle: {
        color: "rgba(164, 49, 49, 1)"
      },
      areaStyle: {
        color: "rgba(197, 24, 24, 1)"
      }
    },
    dataBackground: {
      lineStyle: {
        color: "rgba(231, 28, 28, 1)"
      },
      areaStyle: {
        color: "rgba(186, 27, 27, 1)"
      }
    }
        }],
        animationEasing: "elasticOut",
        animationEasingUpdate: "elasticOut",
        animationDelay: function (idx) {
          return idx * 20;
        },
        animationDelayUpdate: function (idx) {
          return idx * 20;
        },
      };
      //this.myChart.clear();
      this.myChart.setOption(this.option);
    },
  },
  watch: {
    x: {
      handler(val, oldval) {
        //this.myChart.clear();
        this.initOption();
      },
    },
    y: {
      handler(val, oldval) {
        //this.myChart.clear();
        this.initOption();
      },
    },
  },
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
</style>
